import React from "react";
import './TodoFooter.css';
import { useSelector, useDispatch } from "react-redux";
import { checkAllTodo, removeDoneTodos } from "../../redux-n/slices/todoSlice";

export default function TodoFooter() {
  //获取 dispatch 函数
  let dispatch = useDispatch();
  //获取所有的任务数据
  let todos = useSelector(state => state.todos);

  //声明函数
  let checkAll = (e) => {
    dispatch(checkAllTodo(e.target.checked));
  }

  //删除所有已经完成的任务
  let clean = () => {
    dispatch(removeDoneTodos());
  }

  return (
    <div className="todo-footer">
      <label>
        <input type="checkbox" onChange={checkAll} />
      </label>
      <span>
        <span>已完成 {todos.filter(item => item.done).length} </span> / 全部 {todos.length}
      </span>
      <button onClick={clean} className="btn btn-danger">清除已完成任务</button>
    </div>
  );
}
